// 设置指引 example:商品管理->属性管理->规格管理
.lead {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #F5F7FA;
    >h3 {
        font-size: 18px;
    }
    >div {
        margin-top: 15px;
        color: #333;
        p {
            font-size: 12px;
            &+p {
                margin-top: 5px;
            }
        }
        &:last-child {
            margin-top: 30px;
            .el-button {
                padding: 0;
            }
        }
    }
    
}

// 搜索模块
.search {
    padding-top: 20px;
    padding-left: 20px;
    background-color: #F5F7FA;
    margin-bottom: 30px;
    font-size: 0;   //解除两个form-item之间存在的莫名空白间距
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {

        // margin-bottom: 0 !important;
        .el-input--small .el-input__inner,
        .el-date-editor.el-input{       //普通输入
            width: 196px;
        }
        .el-date-editor.el-input__inner {   //日期
            width: 350px;
        }
    }

    .el-form-item--small .el-form-item__content,
    .el-form-item--small .el-form-item__label {
        color: #333;
        font-size: 14px;
        font-weight: normal;
        height: 32px;
        .el-select.el-select--small {
            height: 100%;
        }
        .el-input--small {
            height: 100%;
        }
        .el-button--small {
            height: 100%;
            border-radius: 4px;
        }
    }
    .el-form-item--small .el-form-item__content {   //在font-item塞入按钮时 清除多余的空白间距
        font-size: 0;
    }

    .el-form-item--small .el-form-item__label {
        width: 86px;
        padding: 0;
        margin-right: 12px;
    }
    

    .el-form--inline .el-form-item {
        margin-right: 30px;
        margin-bottom: 20px;
        &:last-child {
            transition: margin-left ease-in 0.4s;
        }
    }

    .el-card__body {
        padding-top: 30px;
        padding-bottom: 0 !important;
    }

    // example: 商品管理->商品举报
    .formWrapBtn {  //用作标识
        // margin-left: 86+12;  //86固定标签宽度+12marginRight
        // margin-left: 98px;
    }
}

//表格模块
.table  {
    .headerRow {        //表头
        height: 48px;
        // padding: 15px 0; //无效
    }

    .el-table__fixed-right {        //面包屑切换时会导致表格固定列的最后一行出现边框底线
        height: 100% !important;
    }

    .el-table .el-table__body td {
        padding: 15px 0;
        font-size: 12px;
    }
    
    .el-table--enable-row-transition .el-table__body .el-table-column--selection .cell {
        padding: 0 10px;
    }

    .el-table th>.cell {
        // padding-left: 14px !important;
        font-size: 12px;
    }

    .el-table thead th {
        // font-size: 12px;
        padding: 0;
        // background-color: rgba(245, 247, 250, 1) !important; //ELEMENT全局设置
    }

    .el-radio-button--small .el-radio-button__inner {
        margin-bottom: 5px;
    }

    .el-table thead {
        color: #333;
    }

    .el-table .cell {
        line-height: 1.5;
        .el-table__expand-icon {
            margin-right: 10px;
        }
    }

    .el-link {
       font-size: 12px;
    }

    // example:商品管理->商品列表的商品信息列
    .goodPic.el-link {      //商品信息的两行文字保持36px => font-size=12px line-height:1.5
        font-size: 0;
        line-height: 1.5;
        .el-link--inner {
            font-size:  0 !important;
            >span {
                font-size: 12px;
            }
        }   
    }

    .table__action {
        display: flex;
        justify-content: flex-start;
        font-size: 0;   //莫名空白间距
		// flex-wrap: wrap;
		white-space: nowrap;
		word-wrap: normal;

        .el-link {
            padding: 0 5px;
            font-size: 12px !important;
            &:first-child {
                padding-left: 0;
            }
            &+.el-link {
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    background-color: #409EFF;
                    left: 0;
                    height: 14px;
                    width: 1px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}

.allCheck {
    padding-left: 10px;
    padding-right: 10px;
    &.el-button {
        border: none;

        &:focus,
        &:hover {
            background-color: #fff;
        }
    }
    .el-checkbox__input {
        // ELEMENT官方的middle对齐会使元素多出.22像素
        vertical-align: top;
    }

    .el-checkbox__label {
        font-size: 12px !important;
        line-height: 1;
    }
}

//表单模块
.formWarp {
    .form-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 32px;
        color: #000;
        margin-bottom: 20px;
    }
    .form-sub-title {
        font-weight: 600;
        font-size: 14px;
        line-height: 32px;
    }

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        .el-input__inner p {
            line-height: 33px;
            font-size: 12px;
        }

        span {
            font-size: 12px;
        }

        .el-date-editor.el-input {
            width: 450px;
        }
    }

    .el-form-item__label,
    .el-form-item__content {
        font-size: 12px;
        color: #333;
        font-weight: normal;
    }

    .el-card__body {
        // padding-bottom: 0 !important;
    }

    /* 按钮区域的上一个form-item */
    .btn_lastItem {
        margin-bottom: 30px;
    }

    /* 按钮区域 */
    .btnArea {
        margin-bottom: 0;
        .el-form-item__content {
            // 去除按钮高度与容器高度不一致
            font-size: 0;
            line-height: 0;
        }
    }

    .el-divider {
        background-color: #ebeef5;
    }

    // .uploader-imgWarp {
    //     display: inline-block;
    // }

    // .uploader-imgWarp .el-upload {
    //     border: 1px dashed #d9d9d9;
    //     border-radius: 6px;
    //     cursor: pointer;
    //     position: relative;
    //     overflow: hidden;
    //     width: 100px;
    //     height: 100px;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    // }

    // .uploader-imgWarp .el-upload:hover {
    //     border-color: #409EFF;
    // }

    // .uploader-icon {
    //     font-size: 23px;
    // }

    // .uploader-img {
    //     width: 100%;
    //     height: 100%;
    //     display: block;
    // }
}

//信息提示模块
.theme {
    &.el-alert {
        padding: 10.5px 16px;
        align-items: flex-start;
    }

    &.el-alert--warning.is-light,
    &.el-alert--info.is-light {
        .el-alert__description {
            color: #333333;
            margin: 0;
        }
    } 

    &.el-alert--warning.is-light,
    &.el-alert--info.is-light {
        // color: #1890ff;
        color: $mainColor;
        background-color: #eaf4fe;
        border: 1px solid #abd1f9;
        box-sizing: border-box;
        line-height: 1.5;
        .el-alert__icon {
            font-size: 20px;
            &.is-big {      //官网没有这个类 但是页面中有?
                width: auto;
            }
        }

        .el-alert__title {
            color: #333333;
            font-size: 12px;
            margin-left: 5px;
        }
    }
}

.defalult {
    &.el-alert {
        padding: 10.5px 16px;
    }

    &.el-alert--warning.is-light {
        color: #999999;
        background-color: #f8f8f8;
        border: none;
        box-sizing: border-box;

        .el-alert__icon {
            font-size: 20px;
        }

        .el-alert__title {
            color: #999999;
            font-size: 12px;
            margin-left: 5px;
        }
    }
}

.dialog-form-small {
    width: 445px;
}
.dialog-form-large{
    width: 900px;
}

//弹窗表单(超出高度的话可以竖向滚动,用法：<el-dialog custom-class="dialog-form">)
[class*='dialog-form']{
    max-height: 75vh;
    // overflow: auto;
    border-radius: 6px;
	
	// 这段是将dialog划分为竖向的flex布局,设定dialog__body为flex-1并且竖向滚动,这样dialog__footer就不会因为body内容太多而埋在窗口底部之外
	display: flex;
	flex-direction: column;
	
    &.el-dialog {
        margin: 0 !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .el-dialog__header{
    }
	
    .el-dialog__body {
        padding: 15px;
		
		// 这段是将dialog划分为竖向的flex布局,设定dialog__body为flex-1并且竖向滚动,这样dialog__footer就不会因为body内容太多而埋在窗口底部之外
		overflow: auto;
    }

    .el-dialog__footer {
        padding: 15px;
    }

    .el-form-item__label,
    .el-form-item__content,
    .el-checkbox__label {
        font-size: 12px;
        // width: 98px;  //宽度写页面中lable-width element使用的是margin-left来保证标签右边的宽度
        color: #333;
        font-weight: normal;
    }

    .el-form-item:last-child {
        margin-bottom: 0;
    }

    .el-select{
        width: 100%;
    }

    .el-radio {
        font-size: 12px;
        .el-radio__label {
            font-size: 12px;
        }
    }

    // 字数提示
    .el-input__count {
        line-height: 1;
    }
    // 底部按钮区
    .dialog-footer {
        font-size: 0;   //消除[取消][确定]按钮之间的空白间隙
    }
    // 权限配置的树形选择
    .el-tree {
        .el-tree-node__content {
            height: 32px;
            .el-tree-node__label {
                font-size: 12px;
            }
        }
    }
}

// 弹窗中的表格样式
.dialog-form-table {
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-radius: 0;
    .headerRow {        //表头
        th {
            height: 48px;        //无效设置
            padding: 0;
            font-weight: 600;
            >.cell {
                font-size: 12px;
                line-height: 1.5;
            }
        }
    }

    .el-table__body-wrapper,
    .el-table__fixed-right .el-table__fixed-body-wrapper{
        td {
            padding: 15px 0;
            >.cell {
                font-size: 12px;
                padding: 0 10px;
                line-height: 1.5;
                .el-link {
                    font-size: 12px;
                }
            }
        }
    }

	.el-form{
		.el-form-item{
			margin-bottom: 0 !important;
			&.is-error{
				margin-bottom: 18px !important;
			}

		}
	}
}

// 底部全选及分页样式
.dialog-paging {
    .el-checkbox {
        .el-checkbox__label {
            font-size: 12px;
        }
    }
}

.el-card.is-always-shadow {
    box-shadow: none;
}

.el-card {
    border: none;
}

.el-image-viewer__btn.el-image-viewer__close {
    font-size: 35px !important;
    color: #fff;
}


//el-tabs 模块
.topTabs {
    border-radius: 3px;
    overflow: hidden;

    .el-tabs__header {
        background-color: #fff;
        margin-bottom: 0;

        .el-tabs__nav-wrap {
            .el-tabs__nav-scroll {
                padding: 0 23px;

                .el-tabs__nav {

                    // height: 50px;
                    .el-tabs__item {
                        height: 50px;
                        line-height: 50px;
                    }
                }
            }
        }
    }
}

.self__rate {
    .el-rate__icon {
        margin-right: 0;
        font-size: 18px;
    }
}
